<template>
  <el-tabs
    ref="tabs"
    class="ui-tabs"
    :class="['ui-tabs--' + type, 'is-' + align, { 'is-shrink': shrink }]"
    v-model="innerValue"
    :stretch="stretch"
    :style="style"
    @tab-click="handleTabClick"
  >
    <slot></slot>
  </el-tabs>
</template>
<script>
import Tabs from 'element-ui/lib/tabs'
import 'element-ui/lib/theme-chalk/tabs.css'

export default {
  name: 'UiTabs',
  components: {
    ElTabs: Tabs
  },
  props: {
    value: {
      type: String
    },
    stretch: {
      type: Boolean
    },
    // 左右缩进
    shrink: {
      type: Boolean,
      default: false
    },
    align: {
      type: String,
      default: 'left',
      validator (value) {
        return ['left', 'center', 'right'].indexOf(value) >= 0
      }
    },
    height: {
      type: String
    },
    type: {
      type: String,
      default: 'default',
      validator (value) {
        return ['default', 'background', 'wisp'].indexOf(value) >= 0
      }
    }
  },
  data () {
    return {
      tabs: null
    }
  },
  computed: {
    innerValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    },
    style () {
      const style = {}
      if (this.height) {
        style.height = this.height
      }
      return style
    }
  },
  mounted () {
    this.tabs = this.$refs.tabs
  },
  methods: {
    handleTabClick (evt) {
      this.$emit('tab-click', {
        name: evt.name
      })
    }
  }
}
</script>
<style lang="less">
.ui-tabs.is-one{
  > .el-tabs__header.is-top{
    display: none;
  }
}
.ui-tabs.is-shrink{
  > .el-tabs__header .el-tabs__nav{
    margin-left: 16px;
    margin-right: 16px;
  }
}
.ui-tabs.ui-tabs--default{
  > .el-tabs__header .el-tabs__nav.is-top{
    &.is-stretch{
      .el-tabs__item{
        padding-left: 0;
        padding-right: 0;
      }
    }
    &:not(.is-stretch) {
      .el-tabs__active-bar{
        background-color: transparent;
      }
    }
  }
  > .el-tabs__header .el-tabs__nav-wrap:after{
    height: 1px;
    background-color: #EBEBEB;
  }
  > .el-tabs__header .el-tabs__item{
    height: 46px;
    line-height: 46px;
    font-weight: normal;
    z-index: 3;
    position: relative;
    outline: 0;
    &:focus{
      outline: 0;
    }
    &.is-active, &:hover{
      color: #3385FF;
    }
  }
  > .el-tabs__header .el-tabs__active-bar{
    height: 46px;
    background-color: #F0F8FC;
    &:after{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background-color: #3385FF;
    }
  }
  > .el-tabs__content{
    overflow: initial;
  }
}
.ui-tabs.ui-tabs--background{
  > .el-tabs__header .el-tabs__nav.is-top{
    background-color: #F9FBFD;
    border-radius: 3px;
    .el-tabs__item{
      padding-right: 0;
      padding-left: 0;
      position: relative;
      z-index: 3;
      height: 36px;
      line-height: 36px;
    }
    .el-tabs__active-bar{
      height: 36px;
      border-radius: 3px;
      background-color: #F0F8FC;
    }
  }
}

.ui-tabs.ui-tabs--wisp{
  > .el-tabs__header .el-tabs__nav-wrap:after{
    height: 1px;
    background-color: transparent;
  }
  > .el-tabs__header .el-tabs__item{
    height: 32px;
    line-height: 32px;
    font-weight: normal;
    z-index: 3;
    position: relative;
    outline: 0;
    padding: 0 12px;
    border-radius: 4px;
    &:focus{
      outline: 0;
    }
    &.is-active, &:hover{
      color: #3385FF;
    }
  }
  > .el-tabs__header .el-tabs__active-bar{
    height: 32px;
    background-color: #f4f5f7;
    border-radius: 4px;
    padding: 0 12px;
    box-sizing: content-box;
    margin-left: -12px;
  }
  > .el-tabs__content{
    overflow: initial;
  }
}
.ui-tabs.el-tabs{
  display: flex;
  flex-direction: column;
  > .el-tabs__header{
    margin-bottom: 0;
  }
  > .el-tabs__content{
    flex: 1;
    min-height: 0;
  }
  > .el-tabs__content > .el-tab-pane{
    height: 100%;
  }
  &.is-center{
    > .el-tabs__header .el-tabs__nav-scroll{
      text-align: center;
    }
    > .el-tabs__header .el-tabs__nav{
      display: inline-block;
      float: none;
    }
  }
}
.ui-dialog{
  .el-tabs > .el-tabs__header{
    margin-bottom: 0;
  }
}
</style>
